<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Input Range类型详解</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }

      body {
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        color: #333;
        line-height: 1.6;
        padding: 20px;
        min-height: 100vh;
      }

      .container {
        max-width: 1000px;
        margin: 0 auto;
      }

      header {
        text-align: center;
        margin-bottom: 40px;
        padding: 20px;
        background: white;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      }

      h1 {
        color: #2c3e50;
        margin-bottom: 10px;
      }

      .subtitle {
        color: #7f8c8d;
        font-size: 1.2rem;
      }

      .content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
      }

      @media (max-width: 768px) {
        .content {
          grid-template-columns: 1fr;
        }
      }

      .card {
        background: white;
        border-radius: 10px;
        padding: 25px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;
      }

      .card:hover {
        transform: translateY(-5px);
      }

      h2 {
        color: #3498db;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid #f0f0f0;
      }

      .example {
        margin: 20px 0;
      }

      .range-container {
        margin: 25px 0;
      }

      .range-label {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
      }

      .range-value {
        font-weight: bold;
        color: #e74c3c;
      }

      /* 自定义滑块样式 */
      input[type="range"] {
        -webkit-appearance: none;
        width: 100%;
        height: 8px;
        border-radius: 5px;
        background: #d7dcdf;
        outline: none;
      }

      input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #3498db;
        cursor: pointer;
        transition: background 0.3s;
      }

      input[type="range"]::-webkit-slider-thumb:hover {
        background: #2980b9;
      }

      input[type="range"]::-moz-range-thumb {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #3498db;
        cursor: pointer;
        border: none;
      }

      /* 不同样式的滑块 */
      .styled-range-1::-webkit-slider-thumb {
        background: #e74c3c;
      }

      .styled-range-2 {
        height: 12px;
      }

      .styled-range-2::-webkit-slider-thumb {
        width: 25px;
        height: 25px;
        background: #9b59b6;
      }

      .styled-range-3 {
        height: 5px;
        background: #2ecc71;
      }

      .styled-range-3::-webkit-slider-thumb {
        background: #27ae60;
        border: 2px solid #2c3e50;
      }

      .demo-area {
        background: #2c3e50;
        color: white;
        padding: 25px;
        border-radius: 10px;
        margin-top: 30px;
      }

      .demo-controls {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin-top: 20px;
      }

      .preview-box {
        width: 200px;
        height: 200px;
        margin: 20px auto;
        background: #3498db;
        border-radius: 10px;
        transition: all 0.3s ease;
      }

      .code-block {
        background: #f8f9fa;
        border-left: 4px solid #3498db;
        padding: 15px;
        margin: 15px 0;
        border-radius: 0 5px 5px 0;
        overflow-x: auto;
        font-family: "Courier New", monospace;
      }

      .attribute-table {
        width: 100%;
        border-collapse: collapse;
        margin: 20px 0;
      }

      .attribute-table th,
      .attribute-table td {
        padding: 12px 15px;
        text-align: left;
        border-bottom: 1px solid #e0e0e0;
      }

      .attribute-table th {
        background: #f8f9fa;
        font-weight: 600;
      }

      .attribute-table tr:hover {
        background: #f5f7fa;
      }

      footer {
        text-align: center;
        margin-top: 40px;
        padding: 20px;
        color: #7f8c8d;
        font-size: 0.9rem;
      }

      .tip {
        background: #e8f4fc;
        padding: 15px;
        border-radius: 5px;
        margin: 15px 0;
        border-left: 4px solid #3498db;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <header>
        <h1>Input Range 类型详解</h1>
        <p class="subtitle">创建滑块控制器的完整指南</p>
      </header>

      <div class="content">
        <div class="card">
          <h2>基本用法</h2>
          <p>
            <code>&lt;input type="range"&gt;</code>
            元素用于创建一个滑块控件，允许用户在一个范围内选择数值。
          </p>

          <div class="example">
            <div class="range-container">
              <div class="range-label">
                <span>默认滑块:</span>
                <span class="range-value" id="value1">50</span>
              </div>
              <input type="range" id="range1" min="0" max="100" value="50" />
            </div>

            <div class="range-container">
              <div class="range-label">
                <span>带步长的滑块:</span>
                <span class="range-value" id="value2">5</span>
              </div>
              <input
                type="range"
                id="range2"
                min="0"
                max="10"
                step="1"
                value="5"
              />
            </div>
          </div>

          <div class="code-block">
            &lt;input type="range" min="0" max="100" value="50"&gt;
          </div>

          <div class="tip">
            <strong>提示：</strong> 使用 <code>min</code>, <code>max</code> 和
            <code>value</code> 属性定义滑块的范围和默认值。
          </div>
        </div>

        <div class="card">
          <h2>自定义样式</h2>
          <p>可以通过CSS自定义滑块的外观，使其更符合网站设计。</p>

          <div class="example">
            <div class="range-container">
              <div class="range-label">
                <span>红色滑块:</span>
                <span class="range-value" id="value3">30</span>
              </div>
              <input
                type="range"
                id="range3"
                min="0"
                max="100"
                value="30"
                class="styled-range-1"
              />
            </div>

            <div class="range-container">
              <div class="range-label">
                <span>大号紫色滑块:</span>
                <span class="range-value" id="value4">75</span>
              </div>
              <input
                type="range"
                id="range4"
                min="0"
                max="100"
                value="75"
                class="styled-range-2"
              />
            </div>

            <div class="range-container">
              <div class="range-label">
                <span>绿色细滑块:</span>
                <span class="range-value" id="value5">60</span>
              </div>
              <input
                type="range"
                id="range5"
                min="0"
                max="100"
                value="60"
                class="styled-range-3"
              />
            </div>
          </div>

          <div class="code-block">
            /* Webkit浏览器样式 */<br />
            input[type="range"]::-webkit-slider-thumb {<br />
            &nbsp;&nbsp;width: 20px;<br />
            &nbsp;&nbsp;height: 20px;<br />
            &nbsp;&nbsp;border-radius: 50%;<br />
            &nbsp;&nbsp;background: #3498db;<br />
            &nbsp;&nbsp;cursor: pointer;<br />
            }
          </div>
        </div>

        <div class="card">
          <h2>属性参考</h2>
          <p>range输入类型支持以下属性：</p>

          <table class="attribute-table">
            <thead>
              <tr>
                <th>属性</th>
                <th>描述</th>
                <th>示例</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><code>min</code></td>
                <td>滑块的最小值</td>
                <td><code>min="0"</code></td>
              </tr>
              <tr>
                <td><code>max</code></td>
                <td>滑块的最大值</td>
                <td><code>max="100"</code></td>
              </tr>
              <tr>
                <td><code>value</code></td>
                <td>滑块的初始值</td>
                <td><code>value="50"</code></td>
              </tr>
              <tr>
                <td><code>step</code></td>
                <td>滑块值的步长</td>
                <td><code>step="5"</code></td>
              </tr>
              <tr>
                <td><code>list</code></td>
                <td>关联的datalist元素ID</td>
                <td><code>list="markers"</code></td>
              </tr>
            </tbody>
          </table>

          <div class="example">
            <div class="range-container">
              <div class="range-label">
                <span>带刻度的滑块:</span>
                <span class="range-value" id="value6">50</span>
              </div>
              <input
                type="range"
                id="range6"
                min="0"
                max="100"
                value="50"
                step="20"
                list="markers"
              />
              <datalist id="markers">
                <option value="0"></option>
                <option value="20"></option>
                <option value="40"></option>
                <option value="60"></option>
                <option value="80"></option>
                <option value="100"></option>
              </datalist>
            </div>
          </div>
        </div>

        <div class="card">
          <h2>实际应用</h2>
          <p>range输入类型常用于音量控制、图像编辑器、价格筛选等场景。</p>

          <div class="demo-area">
            <h3>交互演示：调整方框属性</h3>
            <div class="preview-box" id="previewBox"></div>

            <div class="demo-controls">
              <div class="range-container">
                <div class="range-label">
                  <span>宽度:</span>
                  <span class="range-value" id="widthValue">200px</span>
                </div>
                <input
                  type="range"
                  id="widthRange"
                  min="100"
                  max="300"
                  value="200"
                />
              </div>

              <div class="range-container">
                <div class="range-label">
                  <span>高度:</span>
                  <span class="range-value" id="heightValue">200px</span>
                </div>
                <input
                  type="range"
                  id="heightRange"
                  min="100"
                  max="300"
                  value="200"
                />
              </div>

              <div class="range-container">
                <div class="range-label">
                  <span>圆角:</span>
                  <span class="range-value" id="radiusValue">10px</span>
                </div>
                <input
                  type="range"
                  id="radiusRange"
                  min="0"
                  max="50"
                  value="10"
                />
              </div>

              <div class="range-container">
                <div class="range-label">
                  <span>透明度:</span>
                  <span class="range-value" id="opacityValue">1.0</span>
                </div>
                <input
                  type="range"
                  id="opacityRange"
                  min="0"
                  max="10"
                  value="10"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <footer>
        <p>
          © 2023 Input Range类型详解 | 使用HTML5 range输入类型创建交互式滑块控件
        </p>
      </footer>
    </div>

    <script>
      // 基本滑块的值显示
      document.getElementById("range1").addEventListener("input", function () {
        document.getElementById("value1").textContent = this.value;
      });

      document.getElementById("range2").addEventListener("input", function () {
        document.getElementById("value2").textContent = this.value;
      });

      document.getElementById("range3").addEventListener("input", function () {
        document.getElementById("value3").textContent = this.value;
      });

      document.getElementById("range4").addEventListener("input", function () {
        document.getElementById("value4").textContent = this.value;
      });

      document.getElementById("range5").addEventListener("input", function () {
        document.getElementById("value5").textContent = this.value;
      });

      document.getElementById("range6").addEventListener("input", function () {
        document.getElementById("value6").textContent = this.value;
      });

      // 交互演示
      const widthRange = document.getElementById("widthRange");
      const heightRange = document.getElementById("heightRange");
      const radiusRange = document.getElementById("radiusRange");
      const opacityRange = document.getElementById("opacityRange");
      const previewBox = document.getElementById("previewBox");

      widthRange.addEventListener("input", updatePreview);
      heightRange.addEventListener("input", updatePreview);
      radiusRange.addEventListener("input", updatePreview);
      opacityRange.addEventListener("input", updatePreview);

      function updatePreview() {
        const width = widthRange.value;
        const height = heightRange.value;
        const radius = radiusRange.value;
        const opacity = opacityRange.value / 10;

        previewBox.style.width = `${width}px`;
        previewBox.style.height = `${height}px`;
        previewBox.style.borderRadius = `${radius}px`;
        previewBox.style.opacity = opacity;

        document.getElementById("widthValue").textContent = `${width}px`;
        document.getElementById("heightValue").textContent = `${height}px`;
        document.getElementById("radiusValue").textContent = `${radius}px`;
        document.getElementById("opacityValue").textContent =
          opacity.toFixed(1);
      }

      // 初始化预览
      updatePreview();
    </script>
  </body>
</html>
